<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="serviceNumber" label="维修编号" width="160" />
      <el-table-column prop="vehicleId" label="车辆编号" width="160" />
      <el-table-column prop="licensePlate" label="车牌号" width="180" />
      <el-table-column prop="type" label="车辆类型" width="180" />
      <el-table-column prop="name" label="驾驶员" width="160" />
      <el-table-column prop="maintenanceDate" label="维修日期" />
      <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="warning" @click="ComeArrange(scope.row.id)">
          安排整备
        </el-button>
        <el-button
          size="small"
          type="danger"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
    </el-table>

    <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[2, 5]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="->, total, sizes, prev, pager, next"
      :total=total
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  </template>
  
  <script lang="ts" setup>
  import { ElMessage, ElTable } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import type { ComponentSize } from 'element-plus'
import { available, comeArrange } from '../../api/work.js'


const currentPage4 = ref(1)
const pageSize4 = ref(2)
const total = ref()
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  pageSize4.value = val;
  getAvailable();
};

const handleCurrentChange = (val: number) => {
  currentPage4.value = val;
  getAvailable();
};
  const tableData = ref([])

const getAvailable = async() =>{
  const payload = {
    page: currentPage4.value,
    pageSize: pageSize4.value
  }
  try{
    const result = await available(payload);
    if(result.data.code === 200){
      tableData.value = result.data.data.recodes;
      total.value = result.data.data.total
    }else {
      ElMessage.error(result.data.msg ? result.data.msg : '未查询到任何信息');
    }
  }catch(error){
    ElMessage.error("无法获取")
  }
  }

  const ComeArrange = async(id: number)=>{
    // console.log(id)
    const ids = id;
    try{
      const result = await comeArrange(ids);
        if(result.data.code === 200){
          setTimeout(()=>{
            ElMessage.success("前往整备"),
            getAvailable()
          }, 500)
      }else{
        ElMessage.error("错误")
      }
    }catch(error){
      ElMessage.error("错误")
    }
  }

  onMounted(()=>{
    setTimeout(()=>{
      getAvailable();
    },100)
  })
  </script>

<style scoped>
    .demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
  